<template>
  <el-dialog v-model="showDialog"
             :title="title"
             :width="width"
             :destroy-on-close="true"
             :close-on-click-modal="false"
             :draggable="true"
  >
    <template #title>
      <slot name="header">
        {{ title }}
      </slot>
    </template>

    <!-- 主体内容 -->
    <slot></slot>

    <!-- 底部操作区 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button v-if="showCancel" @click="cancel">{{ cancelText }}</el-button>
        <el-button type="primary" @click="confirm">{{ confirmText }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {ref, watch} from "vue";

const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '弹窗'
  },
  width: {
    type: String,
    default: '30%'
  },
  showCancel: {
    type: Boolean,
    default: true
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  confirmText: {
    type: String,
    default: '确定'
  }
})

const emit = defineEmits(['update:showDialog', 'confirm', 'cancel'])

// 内部维护的可见性状态（解决直接修改prop的问题）
const showDialog = ref(props.showDialog)

// 监听外部传入的modelValue变化
watch(() => props.showDialog, val => {
  showDialog.value = val
})

// 确认按钮点击
const confirm = () => {

  emit('confirm')
}

// 取消按钮点击
const cancel = () => {
  emit('cancel')
  close()
}

// 关闭弹窗（不触发事件）
const close = () => {
  showDialog.value = false
}

// 对外暴露的方法
defineExpose({
  show: () => showDialog.value = true,
  hide: () => showDialog.value = false,
  toggle: () => showDialog.value = !showDialog.value
})

</script>

<style scoped>

</style>